<template>
  <nav id="pagination">
    <div class="pagination">
      <a @click="handlePrePage" v-show="preTotal" class="extend prev">
        <i class="xzfont icon-arrow-left-line"></i>
        <div class="pagination_tips_prev">上页</div>
      </a>
      <template v-for="page in totalPage">
        <a
          v-if="pageInfo.pageNum !== page"
          @click="handlePageChange(page)"
          class="page-number"
          >{{ page }}</a
        >
        <span v-else class="page-number current">{{ page }}</span>
      </template>
      <a @click="handleNextPage" v-show="nextTotal" class="extend next">
        <div class="pagination_tips_next">下页</div>
        <i class="xzfont icon-arrow-right-line"></i>
      </a>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";

const pageInfo = ref<PageInfo>({
  pageNum: 1,
  pageSize: 3,
});

const props = defineProps({
  pageSize: {
    type: Number,
    default: 3,
  },
  pageNum: {
    type: Number,
    default: 1,
  },
  total: {
    type: Number,
    default: 0,
  },
});

const emit = defineEmits(["pageChange"]);

const totalPage = computed(() => {
  if (props.total === 0) {
    return 0;
  }
  return Math.ceil(props.total / pageInfo.value.pageSize);
});
const preTotal = computed(() => pageInfo.value.pageNum - 1);
const nextTotal = computed(() => {
  if (props.total === 0) {
    return 0;
  }
  return (
    Math.ceil(props.total / pageInfo.value.pageSize) - pageInfo.value.pageNum
  );
});

const handlePageChange = (page: number) => {
  pageInfo.value.pageNum = page;
  emit("pageChange", pageInfo.value.pageNum, pageInfo.value.pageSize);
};

const handlePrePage = () => {
  if (pageInfo.value.pageNum <= 1) {
    return;
  }
  pageInfo.value.pageNum--;
  emit("pageChange", pageInfo.value.pageNum, pageInfo.value.pageSize);
};

const handleNextPage = () => {
  if (pageInfo.value.pageNum >= totalPage.value) {
    return;
  }
  pageInfo.value.pageNum++;
  emit("pageChange", pageInfo.value.pageNum, pageInfo.value.pageSize);
};
</script>

<style scoped lang="scss">
#pagination {
  width: 100%;
  margin-top: 0.5rem;
  margin-bottom: 1rem;

  .pagination {
    text-align: center;
    position: relative;
    display: flex;
    justify-content: center;
    gap: 8px;

    a.extend {
      width: 4rem;
      height: 2.5rem;
      line-height: 1.9rem;
      border-radius: 8px !important;
      background: var(--xz-card-bg);
      box-shadow: var(--xz-shadow-border);
      position: absolute;
      border: var(--style-border);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      transition: 0.3s;
    }

    a.extend.prev {
      left: 0;

      .pagination_tips_prev {
        margin-right: -32px;
        transition: 0.3s ease-out 0s;
        opacity: 0;
      }
    }

    a.extend.next {
      right: 0;

      .pagination_tips_next {
        margin-left: -32px;
        transition: 0.3s ease-out 0s;
        opacity: 0;
      }

      &:hover {
        .pagination_tips_next {
          margin-left: 2px;
          opacity: 1;
          white-space: nowrap;
        }
      }
    }

    a.extend.prev,
    a.extend.next {
      &:hover {
        color: var(--xz-theme);
        border: var(--style-border-hover);
        box-shadow: var(--xz-shadow-main);
      }

      i {
        font-size: 22px;
      }
    }

    a.extend.prev {
      &:hover {
        .pagination_tips_prev {
          margin-right: 2px;
          opacity: 1;
          white-space: nowrap;
        }
      }
    }

    .page-number {
      width: 2.5rem;
      background: var(--xz-card-bg);
      height: 2.5rem;
      line-height: calc(2.5rem - 2px);
      border-radius: 8px !important;
      box-shadow: var(--xz-shadow-border);
      border: var(--style-border);
      transition: 0.3s;
      display: inline-block;
      min-width: 1.2rem;
      text-align: center;
      cursor: pointer;

      &.current {
        background: var(--xz-theme);
        border: var(--style-border-hover);
        box-shadow: var(--xz-shadow-theme);
        color: var(--xz-card-bg);
        cursor: default;

        &:hover {
          color: var(--xz-white);
          background: var(--xz-theme);
          box-shadow: var(--xz-shadow-main);
        }
      }

      &:hover {
        color: var(--xz-theme);
        border: var(--style-border-hover);
        box-shadow: var(--xz-shadow-main);
      }
    }
  }
}
</style>
